<template>
	<view>
		<cu-custom :isBack="true" style="background-color: transparent;">
			<block slot="content">
				<view class="custom-title">会员中心</view>
			</block>
		</cu-custom>
		<view class="m-top-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/newImg/memberBg.png)'}]">
			<view class="top-title">暂未开通</view>
			<view class="flex align-center justify-start margin-top-98">
				<view>
					<image src="https://txr001.zthj.net/static/img/avatar.png" class="head-img-class"></image>
				</view>
				<view class="padding-left-18 padding-top-xs" style="width: 100%;">
					<view class="flex align-center justify-between" >
						<view class="text-0101 text-40">某某某</view>
						<view class="" @click="toRecords">
							<text class="d-text">开通记录</text>
							<image src="https://txr001.zthj.net/newImg/dRight.png" class="d-right"></image>
						</view>
					</view>
					<view class="text-666 text-sm">尚未开通，无法享受权益</view>
				</view>
			</view>
			<view @click="modalName = 'openSuccess'">
				<button class="open-btn cu-btn">￥300立即开通</button>
			</view>
		</view>
		<view class="padding-32">
			<view class="m-title">购买会员权益</view>
			<view class="sel-qy-content">
				<view class="qy-list-content" :class="selTab==index?'':'bg-white'" @click="selTab=index"
				:style="{backgroundImage: 'url(' + (selTab==index ?'https://txr001.zthj.net/newImg/mSelBg.png':'')+')'}"
				v-for="(item,index) in list" :key="index">
					<view class="qy-name">{{item.name}}</view>
					<view class="qy-num">￥{{item.mon}}</view>
				</view>
				<view class="qy-list-content" style="background-color: #f4f4f4;">
					<view class="qy-name">批量开通</view>
					<view class="qy-num">
						<image src="https://txr001.zthj.net/newImg/kf.png" class="img-32"></image>
						<text class="padding-left-6 text-img-center">联系客服</text>
					</view>
				</view>
			</view>
			<view class="margin-top-48 text-sm text-6666">
				注: 点击开通即视为您已阅读并同意
				<text style="text-decoration:underline">用户协议</text>、
				<text style="text-decoration:underline">隐私政策</text>
				<view>*本产品为虚拟内容服务，开通后将无法退款，请您理解</view>
			</view>
			<view class="padding-top-32 text-3333 text-lg text-bold-500">会员须知</view>
			<view class="padding-top-18 text-666 text-xs">
				<view>1. 了解会员权益：在开通会员前，需要了解会员享有的权益，专属</view>
				<view class="padding-left-sm">服务。确保这些权益符合自己的需求，有助于判断是否值得开通会员。</view>
				<view>2. 注意会员费用：开通会员通常需要支付一定的费用。在付费前，需要</view>
				<view class="padding-left-sm">了解会员费用的具体金额、支付方式以及是否有隐藏费用。</view>
				<view>3. 隐私政策：在开通会员前，需要仔细阅读小程序的隐私政策，了解小</view>
				<view class="padding-left-sm">程序如何收集、使用和保护用户的个人信息。确保小程序的隐私政策</view>
				<view class="padding-left-sm">符合自己的期望，以保障个人隐私安全。</view>
				<view>4. 用户协议：用户协议是用户与小程序之间的一份合同，其中约定了双</view>
				<view class="padding-left-sm">方的权利和义务。在开通会员前，需要认真阅读用户协议，了解自己</view>
				<view class="padding-left-sm">的权益和义务，以避免不必要的纠纷。</view>
				<view>5. 会员续费：会员通常有一定的有效期，如年度会员、季度会员等。在</view>
				<view class="padding-left-sm">会员有效期即将结束时，需要关注续费政策，了解续费方式和费用，以免会员权益受到影响。</view>
			</view>
		</view>
		
		
		<view class="cu-modal" :class="modalName=='openSuccess'?'show':''" @click="hideModel">
			<view class="cu-dialog">
				<view >
					<image src="https://txr001.zthj.net/newImg/ktScLogo.png" class="img-268"></image>
				</view>
				<view class="ewbbg-img" :style="[{backgroundImage:'url(https://txr001.zthj.net/newImg/ktScBg.png)'}]">
					<view class="text-center">
						<view class="text-success-title">开通成功</view>
						<view class="text-success-desc">您开通青牒会员，已可享受会员全部权益</view>
					</view>
					<view>
						<button class="cu-btn sure-btn" @click="hideModel">确认</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{name:"月卡",mon:"300"},
					{name:"季卡",mon:"300"},
					{name:"年卡",mon:"300"}
				],
				selTab:0,
				modalName:""
			}
		},
		onLoad() {
			
		},
		methods: {
			toRecords(){
				uni.navigateTo({
					url:"/subpackage/pages/mine/tradeRecords"
				})
			},
			hideModel(){
				this.modalName=null;
			}
		}
	}
</script>

<style>
page{background:#F4F4F4}
</style>
<style scoped lang="less">
	.m-top-content{
		margin-top: 34rpx;
		background-size: 100% 100%;
		width: 100%;
		height: 444rpx;
		padding:36rpx 96rpx;
		.top-title{
			font-size: 40rpx;
			font-weight: 500;
			color: #001E60;
		}
		.head-img-class{
			width: 96rpx;
			height: 96rpx;
			vertical-align: middle;
			border-radius: 100%;
		}
		.d-text{
			padding-right: 6rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #24458E;
		}
		.d-right{
			width: 10.8rpx;
			height: 12rpx;
			vertical-align: middle;
		}
		.open-btn{
			margin-top: 36rpx;
			width: 534rpx;
			height: 76rpx;
			background: #24458E;
			border-radius: 152rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.m-title{
		font-size: 36rpx;
		font-weight: 500;
		color: #000000;
	}
	.sel-qy-content{
		margin-top: 34rpx;
		display: flex;
		align-content: center;
		justify-content: space-between;
		.qy-list-content{
			background-size: 100% 100%;
			width: 160rpx;
			height: 216rpx;
			// background: #FFFFFF;
			border-radius: 20rpx;
			border: 2rpx solid #24458E;
		    text-align: center;
			.qy-name{
				margin-top: 66rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
			}
			.qy-num{
				padding-top: 12rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #24458E;
			}
		}
	}
	.ewbbg-img{
		background-size: 100% 100%;
		width: 686rpx;
		height: 466rpx;
		margin-top: -168rpx;
		.text-success-title{
			padding-top: 166rpx;
			font-size: 48rpx;
			font-weight: 600;
			color: #222222;
		}
		.text-success-desc{
			padding-top: 14rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #ACB4B6;
		}
		.sure-btn{
			margin-top: 64rpx;
			width: 304rpx;
			height: 88rpx;
			background: #24458E;
			border-radius: 49rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>